<script lang="ts" setup>
  import { useRouter } from 'vue-router';

  const emit = defineEmits(['close']);

  const router = useRouter();

  const goToCreate = (type: string) => {
    emit('close');
    router.push({
      name: 'GameEditorApp',
      query: {
        gameType: type,
      },
    });
  };
</script>

<template>
  <a-modal
    title="选择赛事类型"
    visible
    :width="500"
    :footer="false"
    @cancel="emit('close')"
  >
    <div class="type">
      <div class="type-left">
        <div class="type-name">普通赛事</div>
        <div class="type-desc">单个球场即可执行的比赛</div>
      </div>
      <div>
        <a-button type="primary" @click="goToCreate('normal')">
          立即创建
          <icon-arrow-right />
        </a-button>
      </div>
    </div>

    <div class="type">
      <div class="type-left">
        <div class="type-name">父赛事</div>
        <div class="type-desc">如『吉尼斯』这种形式的比赛</div>
      </div>
      <div>
        <a-button type="primary" @click="goToCreate('parent')">
          立即创建
          <icon-arrow-right />
        </a-button>
      </div>
    </div>

    <div class="type">
      <div class="type-left">
        <div class="type-name">多阶段赛事</div>
      </div>
      <div>
        <a-button type="primary" @click="goToCreate('stage')">
          立即创建
          <icon-arrow-right />
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
  .type {
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid var(--color-border-2);
    padding: 12px;
    display: flex;
    align-items: center;

    &-left {
      flex: 1;
    }

    &-name {
      font-size: 18px;
      font-weight: 600;
    }

    &-desc {
      color: var(--color-text-2);
      margin-top: 10px;
    }
  }
</style>
